import React from 'react';
import {Button, Icon, NavBar, WhiteSpace, WingBlank} from "antd-mobile";
import BasicInfo from "./component/basic-info";
import CommonFunction from "./component/common-function";
import "./css/style.less";
import history from "../../util/router/history";
import {UserCenterStore} from "./store";
import {inject, observer} from "mobx-react";
import {RouteComponentProps} from "react-router";
import DataLoading from "../../util-biz/loading-data";
import ErrorPage from "../../util-biz/error";
import {logout} from "../../util-biz/login/loginUtil";

interface IDishDetailProps extends RouteComponentProps<{id: string}>{
  userCenterStore?: UserCenterStore | any;
}

@inject('userCenterStore')
@observer
export default class UserCenter extends React.Component<IDishDetailProps, any> {

  async componentDidMount(): Promise<void> {
    await this.props.userCenterStore.initUserInfo();
  }

  render() {
    const {userInfo, userStatus} = this.props.userCenterStore;
    if (userInfo === null) {
      if (userStatus === 1) {
        return <DataLoading />;
      } else {
        return <ErrorPage tips="用户不存在或出错啦..."/>;
      }
    }
    return (
      <>
        {/* 导航栏 */}
        <NavBar
          mode="dark"
          icon={<Icon type="left" />}
          onLeftClick={history.goBack}
        >
          个人中心
        </NavBar>

        {/* 头像昵称信息 */}
        <BasicInfo />
        <WhiteSpace/>

        {/* 常用功能 */}
        <CommonFunction />
        <WhiteSpace size="xl"/>

        {/* 退出登录 */}
        <WingBlank><Button type="warning" onClick={logout}>退出登录</Button></WingBlank>
        <WhiteSpace size="xl"/>

        {/* 底部版权技术支持信息 */}
        <div className="bb-copyright">
          <p>© 2019 技术支持:小白的梦</p>
        </div>
      </>
    );
  }

}
